/* 
 *需求1.点击关闭图片清空内容
 */
let regInput = document.querySelectorAll('.reg-input')
let clearImg = document.querySelectorAll('.clear-img')
    // console.log(clearImg);
    // console.log(regInput);
regInput.forEach(function(dom, i) {
    dom.addEventListener('input', function() {
        // console.log(dom.value.trim().length);
        if (dom.value.trim().length > 0) {
            // 显示对应Input框的关闭图片
            clearImg[i].style.display = 'block'
        } else {
            clearImg[i].style.display = 'none'
        }
    })
})

/* 需求2.点击关闭图片按钮清空input框内容,隐藏关闭图片 */
clearImg.forEach(function(dom, i) {
    dom.addEventListener('click', function() {
        dom.style.display = 'none'
            // 关闭图片对应的input框内容清空
        regInput[i].value = ''
    })
})

/**
 * 定义变量保存验证规则 === 正则表达式
 */
let regArr = [
    /^[a-zA-Z]\w{5,11}$/, //6-12: 字母开头,后面跟字母\数字\下划线
    /^1[3456789][0-9]{9}$/, //11  : 
    /^[a-zA-Z]\w{3}$/, //4位验证码: 字母开头,后面跟字母\数字\下划线
    /^[a-zA-Z]\w{5,11}$/ //6-12: 字母开头,后面跟字母\数字\下划线
]

/**
 * 3. 需求: 失去焦点验证, 验证账号 手机验证码 手机号 密码
 */
// 获取错误提示框
let error = document.querySelectorAll('.error')

regInput.forEach(function(dom, i) {
    let bool = regArr[i].test(dom.value)
    dom.addEventListener('blur', function() {
        if (bool && btn6.disabled === true) {
            error[i].style.display = 'none'
        } else {
            error[i].style.display = 'block'
        }
    })
})

/**
 * 4. 需求: 点击注册按钮,验证账号 手机验证码 手机号 密码
 */

// 获取注册按钮
let btn6 = document.querySelector('.btn-6')
btn6.addEventListener('click', function() {
    for (let i = 0; i < regInput.length; i++) {
        let bool = regArr[i].test(regInput[i].value)
        if (bool) {
            error[i].style.display = 'none'
        } else {
            error[i].style.display = 'block'
            return
        }
    }
})



/**
 * 5. 需求: 点击change-btn,切换注册点击的状态
 */
// 获取阅读接收复选框
let checked = document.querySelector('.checked')

checked.addEventListener('change', function() {
    if (checked.checked) {
        btn6.disabled = false
        btn6.style.background = 'radial-gradient(circle, #f796c0 0%, #76aef1 100%)'

    } else {
        btn6.disabled = true
        btn6.style.background = 'linear-gradient(to left, #f0f2f0, #000c40)'
    }
})